<!--
 * @Description: 泵送作业
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:51:46
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <div class="tabtop" style="width:376px;">
        <div @click="handleClick(1)">
          <div :class="currenindex === 1 ? 'active' : 'text'">待分派</div>
        </div>
        <div @click="handleClick(2)">
          <div :class="currenindex === 2 ? 'active' : 'text'">已分派</div>
        </div>
      </div>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">订单编号</span>
                <el-input v-model="tableParam.orderNo" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.engineeringName" style="width: 20%;max-width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
              <el-button v-show="currenindex===1" size="medium" class="bottom_all_two" style="margin-left: 12px" @click="showDispath">分派任务</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                  <template slot-scope="scope">
                    <div v-if="item.label == '泵送状态'">
                      <span v-if="scope.row.pumpingStatus == 1">待分派</span>
                      <span v-if="scope.row.pumpingStatus == 2">已分派</span>
                    </div>
                    <div v-else-if="item.label == '浇筑方式'">
                      <div>{{scope.row.pouringMethod | pouringMethodFilter}}</div>
                    </div>
                    <div v-else-if="item.label == '泵送难度'">
                      <el-button size="mini" class="bottom_one" @click="look3Fun(scope.row)">查看</el-button>
                    </div>
                    <div v-else-if="item.label == '卸料明细'">
                      <el-button size="mini" class="bottom_one" @click="handleDetails(scope.row)">查看</el-button>
                    </div>
                    <div v-else-if="item.label == '分派任务'">
                      <el-button v-if="scope.row.pumpingStatus == 1&&ButtonList.findIndex(res=>(res.buttonValue=='FENPAI'))!==-1" size="mini" class="bottom_one" @click="ToViewFun(scope.row),operation=1">分派</el-button>
                      <el-button v-if="scope.row.pumpingStatus == 2&&ButtonList.findIndex(res=>(res.buttonValue=='TIAOZHENG'))!==-1" size="mini" class="bottom_one" @click="ToViewFun(scope.row),operation=2">调整</el-button>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 查看 -->
    <el-dialog :visible.sync="ToViewType" width="98%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">分派任务</span>
      <div class="dialoginfo">
        <div>
          <div style="padding-bottom: 10px;">
            <span>人员分派：</span>
            <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItem()">
              <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
              添加
            </el-button>
          </div>
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="toViewList" tooltip-effect="dark">
            <template v-for="(item, index2) in table2">
              <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                <template slot-scope="scope">
                  <div v-if="item.label == '车牌/编号'">
                    <el-select v-model="scope.row.plateNumber" filterable placeholder="请选择" style="width: 100%;" @change="changeItemPumpNo(scope.row)">
                      <el-option v-for="(item, index) in pumpTypeIdList" :key="index" :label="item.plateNumber" :value="item.plateNumber"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.label == '东风车'">
                    <el-select v-if="scope.row.pumpTypeName == '拖泵'" v-model="scope.row.carId" filterable placeholder="请选择" style="width: 100%;" @change="changeItemPlateNumber(scope.row)">
                      <el-option v-for="(item, index) in plateNumberList" :key="index" :label="item.plateNumber" :value="item.carId"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.label == '驾驶员'">
                    <el-select v-model="scope.row.driverId" placeholder="请选择" filterable style="width: 100%;" @change="changeItemDriverId(scope.row)">
                      <el-option v-for="(item, index) in driverIdList" :key="index" :label="item.userName" :value="item.userId"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.prop == 'pumpArrivalTime'">
                    <el-date-picker v-model="scope.row.pumpArrivalTime" :picker-options="pickerOptions" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                  </div>
                  <div v-else-if="item.label == '泵工'" style="width: 250px;">
                    <div v-for="(items, indexs) in scope.row.pumpMans" :key="indexs">
                      <div v-if="items.operationStatus*1!==1" style="display:flex;display:flex;align-items: center;">
                        <div>{{indexs===0?'开场泵工':'换班泵工'}}</div>
                        <el-select v-model="items.pumpManId" :disabled="items.pump!==0" placeholder="请选择" style="width: 110px;" filterable @change="changeItemPumpManId(items)">
                          <el-option v-for="(itemss, indexss) in pumpManIdList" :key="indexss" :label="itemss.userName" :value="itemss.userId"></el-option>
                        </el-select>
                        <el-button size="mini" class="bottom_two" @click="deletePumpPerson(items, indexs, scope.$index)">删除</el-button>
                      </div>
                    </div>
                  </div>
                  <div v-else-if="item.label == '到场时间'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index">
                      <el-date-picker  v-if="items.operationStatus*1!==1" v-model="items.arrivalTime" :picker-options="pickerOptions"  :disabled="items.pump!==0" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                    </div>
                  </div>
                  <div v-else-if="item.label == '状态'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index" style="height:36px; line-height:36px;">
                      <div v-if="items.operationStatus*1!==1">
                        {{['未确认','确认','已完工'][items.pump]}}
                      </div>
                    </div>
                  </div>
                  <div v-else-if="item.label == '确认时间'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index">
                      <div v-if="items.operationStatus*1!==1">
                        {{items.sureTime}}
                      </div>
                    </div>
                  </div>
                  <div v-else-if="item.label == '确认地理位置'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index">
                      <el-button size="mini" class="bottom_one" @click="showMap(items)">查看地图</el-button>
                    </div>
                  </div>
                  <div v-else-if="item.label == '操作'">
                    <div style="display:flex;">
                      <el-button v-if="dataType==1" size="mini" class="bottom_one" @click="addPumpPerson(scope.row.id, scope.$index)">添加泵工</el-button>
                      <el-button size="mini" class="bottom_two" @click="deleteItem(scope.row,scope.$index)">删除</el-button>
                    </div>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="ToViewType = false">关 闭</el-button>
        <el-button class="bottom_all" @click="submit()">确认</el-button>
      </span>
    </el-dialog>
    <!-- 分派任务 -->
    <el-dialog :visible.sync="dispatchVisile" width="98%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">分派任务</span>
      <div class="dialoginfo">
        <div>
          <div style="padding-bottom: 10px;">
            <span>人员分派：</span>
            <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItem2()">
              <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
              添加
            </el-button>
          </div>
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="toViewList2" tooltip-effect="dark">
            <template v-for="(item, index2) in table2">
              <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                <template slot-scope="scope">
                  <div v-if="item.label == '车牌/编号'">
                    <el-select v-model="scope.row.plateNumber" filterable placeholder="请选择" style="width: 100%;" @change="changeItemPumpNo(scope.row)">
                      <el-option v-for="(item, index) in pumpTypeIdList" :key="index" :label="item.plateNumber" :value="item.plateNumber"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.label == '东风车'">
                    <el-select v-if="scope.row.pumpTypeName == '拖泵'" v-model="scope.row.carId" filterable placeholder="请选择" style="width: 100%;" @change="changeItemPlateNumber(scope.row)">
                      <el-option v-for="(item, index) in plateNumberList" :key="index" :label="item.plateNumber" :value="item.carId"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.label == '驾驶员'">
                    <el-select v-model="scope.row.driverId" placeholder="请选择" filterable style="width: 100%;" @change="changeItemDriverId(scope.row)">
                      <el-option v-for="(item, index) in driverIdList" :key="index" :label="item.userName" :value="item.userId"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.prop == 'pumpArrivalTime'">
                    <el-date-picker v-model="scope.row.pumpArrivalTime" :picker-options="pickerOptions" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                  </div>
                  <div v-else-if="item.label == '泵工'">
                    <div v-for="(items, indexs) in scope.row.pumpMans" :key="indexs">
                      <div style="display:flex;align-items: center;">
                        <div>{{indexs===0?'开场泵工':'换班泵工'}}</div>
                        <el-select v-model="items.pumpManId" :disabled="items.pump!==0" filterable placeholder="请选择" style="width: 110px" @change="changeItemPumpManId(items)">
                          <el-option v-for="(itemss, indexss) in pumpManIdList" :key="indexss" :label="itemss.userName" :value="itemss.userId"></el-option>
                        </el-select>
                        <el-button size="mini" class="bottom_two" @click="deletePumpPerson2(items, indexs, scope.$index)">删除</el-button>
                      </div>
                    </div>
                  </div>
                  <div v-else-if="item.label == '到场时间'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index">
                      <el-date-picker  v-model="items.arrivalTime" :picker-options="pickerOptions"  :disabled="items.pump!==0" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                    </div>
                  </div>
                  <div v-else-if="item.label == '状态'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index" style="height:36px; line-height:36px;">
                      <div>
                        {{['未确认','确认','已完工'][items.pump]}}
                      </div>
                    </div>
                  </div>
                  <div v-else-if="item.label == '确认时间'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index">
                      <div>
                        {{items.sureTime}}
                      </div>
                    </div>
                  </div>
                  <!-- <div v-else-if="item.label == '确认地理位置'">
                    <div v-for="(items, index) in scope.row.pumpMans" :key="index">
                      <el-button size="mini" class="bottom_one" @click="showMap(items)">查看地图</el-button>
                    </div>
                  </div> -->
                  <div v-else-if="item.label == '操作'">
                    <div style="display:flex;">
                      <el-button v-if="dataType==1" size="mini" class="bottom_one" @click="addPumpPerson2(scope.row.id, scope.$index)">添加泵工</el-button>
                      <el-button size="mini" class="bottom_two" @click="deleteItem2(scope.row,scope.$index)">删除</el-button>
                    </div>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
          <!-- <div style="margin-top:20px;">
            <span slot="label">到场时间：</span>
            <el-date-picker v-model="arrivalTime" :picker-options="pickerOptions" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
          </div> -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dispatchVisile = false">关 闭</el-button>
        <el-button class="bottom_all" @click="submit2()">确认</el-button>
      </span>
    </el-dialog>
    <!-- 高级搜索 -->
    <el-dialog v-dialogDrag :visible.sync="tableParamType" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">高级搜索</span>
      <div class="dialoginfo">
        <el-form ref="reftableParam" :inline="true" :model="tableParam" label-width="110px">
          <el-form-item>
            <span slot="label">产品名称</span>
            <el-input v-model="tableParam.productName" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">浇筑时间</span>
            <el-date-picker v-model="startTimDateEndTimDate" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="tableParam.startDate=startTimDateEndTimDate[0]||'',tableParam.endDate=startTimDateEndTimDate[1]||''"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">客户名称</span>
            <el-input v-model="tableParam.customerName" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">泵送队</span>
            <el-input v-model="tableParam.pumpingTeam" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">泵送状态</span>
            <el-select v-model="tableParam.pumpingStatus" placeholder="请选择" style="width:400px;">
              <el-option label="待分派" value="1"></el-option>
              <el-option label="已分派" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="tableParamType=false,tableParam.productName='',startTimDateEndTimDate=[],tableParam.startDate='',tableParam.endDate='',tableParam.customerName='',tableParam.pumpingTeam='',tableParam.pumpingStatus=''">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="gettableData(),tableParamType=false">搜 索</el-button>
      </span>
    </el-dialog>
    <!-- 泵送难度 -->
    <el-dialog v-dialogDrag :visible.sync="look3Type" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">泵送难度</span>
      <div class="dialoginfo">
        <el-form ref="reftableParam" :inline="true" label-width="110px" class="FZYbox" :model="look3Form">
          <div>
            <div>
              <span slot="label">泵送标号：<span class="red">{{look3Form.lableCoefficient}}</span></span>
            </div>
            {{look3Form.lable0}}
          </div>
          <div>
            <div>
              <span slot="label">垂直高度：<span class="red">{{look3Form.heightCoefficient}}</span></span>
            </div>
            <el-input v-model="look3Form.height" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </div>
          <div>
            <div>
              <span slot="label">垂直基坑深度：<span class="red">{{look3Form.depthCoefficient}}</span></span>
            </div>
            <el-input v-model="look3Form.depth" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </div>
          <div>
            <div>
              <span slot="label">水平管与立管倾斜角度：<span class="red">{{look3Form.angleCoefficient}}</span></span>
            </div>
            <el-select v-model="look3Form.angle" placeholder="请选择" style="width:400px;" @change="look3Form.angleCoefficient=look3Form.list.find((res)=>look3Form.angle == res.id).difficultyCoefficient">
              <el-option v-for="(item,k) in look3Form.list" :key="k" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div>
            <div>
              <span slot="label">水平管长度范围与弯头数量：<span class="red">{{look3Form.pipeElbowCoefficient}}</span></span>
            </div>
            <div>
              <span>长度 </span>
              <el-input v-model="look3Form.pipeLength" tplaceholder="请输入" clearable style="width:400px;"></el-input>
            </div>
            <div>
              <span>弯头 </span>
              <el-input v-model="look3Form.elbowNum" tplaceholder="请输入" clearable style="width:400px;"></el-input>
            </div>
          </div>
          <el-link class="table_link" :underline="false" @click="calculatePumpingDifficultyRecordFun()">计算难度系数</el-link>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look3Type=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="savePumpingDifficultyRecordFun()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 卸料明细 -->
    <el-dialog v-dialogDrag :visible.sync="visible" width="80%">
      <span slot="title" class="dialog-title">卸料明细</span>
      <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="dataSource" tooltip-effect="dark">
        <el-table-column label="罐车车牌号" prop="carNo" />
        <el-table-column label="罐车司机" prop="driverName" />
        <el-table-column label="泵机车牌/编号" prop="pumpNo" />
        <el-table-column label="泵工" prop="pumpManName" />
        <el-table-column label="泵类型" prop="pumpType" />
        <el-table-column label="接力泵">
          <template slot-scope="{row}">
            <span v-if="row.pumpWay == 1 || row.pumpWay == 2" class="handleColor" @click="additionalRecording(row,'relayPump')">补录</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="卸料时间" prop="dischargeTime" />
        <el-table-column label="预估浇筑量" prop="estimatedPouringNum" />
        <el-table-column label="实际浇筑量" prop="actualPouringNum" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <span v-if="row.pumpWay == 1" class="handleColor" @click="additionalRecording(row,'operation')">补录</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page.sync="page" :page-size="10" layout="prev,pager,next,jumper" :total="total" @current-change="initDetailsTable()"></el-pagination>
    </el-dialog>
    <el-dialog :visible.sync="mapVisible" width="1180px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">查看位置</span>
      <div style="height: 500px;">
        <el-amap ref="amapManager" vid="amap" :center="mapCenter" :zoom="14" class="amap-demo">
          <el-amap-marker  :position="mapCenter" :vid="222"></el-amap-marker>
        </el-amap>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="mapVisible=false">关闭</el-button>
      </span>
    </el-dialog>

    <RelayPumpDialog :visible.sync="relayPumpVisible" :config="relayPumpConfig" @updated="initDetailsTable" />
    <OperationDialog :visible.sync="operationVisible" :config="operationConfig" @updated="initDetailsTable" />
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { getDicType } from "@/api/common.js";
import RelayPumpDialog from "./components/RelayPumpDialog";
import OperationDialog from "./components/OperationDialog";
import {
  queryPage,
  assign_list,
  assignpump_list,
  assigncat_list,
  useruser_list,
  batchDispatch,
  queryPumpingDifficultyRecord,
  calculatePumpingDifficultyRecord,
  savePumpingDifficultyRecord,
  queryPageDetails,
} from "@/api/smart/schedul/f.js";
export default {
  mixins: [mixin],
  components: {
    RelayPumpDialog,
    OperationDialog
  },
  data() {
    return {
      startTimDateEndTimDate: [],
      tableParamType: false,
      pumpTypeIdList: [],
      plateNumberList: [],
      driverIdList: [],
      pumpManIdList: [],
      formDate: {},
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      loading: false,
      /*表格数据*/
      table: [
        {
          label: "订单编号",
          width: "",
          prop: "orderNo",
          status: true,
        },
        {
          label: "产品名称",
          width: "",
          prop: "productName",
          status: true,
        },
        {
          label: "浇筑用量（方）",
          width: "",
          prop: "pouringNum",
          status: true,
        },
        {
          label: "浇筑时间",
          width: "",
          prop: "pouringTime",
          status: true,
        },
        {
          label: "浇筑方式",
          width: "",
          prop: "pouringMethod",
          status: true,
        },
        {
          label: "工程名称",
          width: "",
          prop: "engineeringName",
          status: true,
        },
        {
          label: "客户名称",
          width: "",
          prop: "customerName",
          status: true,
        },
        {
          label: "泵送队",
          width: "",
          prop: "pumpingTeam",
          status: true,
        },
        {
          label: "泵送状态",
          width: "",
          prop: "pumpingStatus",
          status: true,
        },
        {
          label: "浇筑部位",
          width: "",
          prop: "structuralParts",
          status: true,
        },
        {
          label: "工程责任销售",
          width: "",
          prop: "principal",
          status: true,
        },
        {
          label: "内部备注",
          width: "",
          prop: "planRemark",
          status: true,
        },
        {
          label: "卸料明细",
          width: "",
          prop: "",
          status: true,
        },
        {
          label: "泵送难度",
          width: "",
          prop: "",
          status: true,
        },
        {
          label: "分派任务",
          width: "",
          prop: "",
          status: true,
        },
      ],
      table2: [],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      companyNatureIdlist: [],
      planId: "",
      ToViewType: false,
      toViewList: [],
      toViewList2: [],
      toViewListCopy: [],
      dataType: "", //1内部，2外部
      operation: '',//1分派，2调整
      look3Type: false,
      look3Form: {},
      pickerOptions: {
        disabledDate: this.disabledDate
      },
      deleteList1: [],
      dispatchVisile: false,
      mapVisible: false,
      mapCenter: [],
      visible: false,
      multipleSelection: [],
      currenindex: 1,
      page: 1,
      total: 0,
      dataSource: [],
      relayPumpVisible: false, // 接力泵补录
      relayPumpConfig: {},
      operationVisible: false, // 操作补录
      operationConfig: {}
    };
  },
  created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, name: "", linkman: "", productName: '', startDate: '', endDate: '', customerName: '', pumpingTeam: '', pumpingStatus: '1' };
    this.gettableData();
    getDicType({ code: "enterType" }).then((res) => {
      this.companyNatureIdlist = res.data.items;
    });
    useruser_list({ roleId: "dac1d5d7b65e4751b625b341808ab493" }).then(
      (res) => {//用户类型-泵车司机
        this.driverIdList = res.data;
      }
    );
    useruser_list({ roleId: "1687e52bdb9a44baacb9714cc16b5b82" }).then(
      (res) => {//角色类型-泵工
        this.pumpManIdList = res.data;
      }
    );
  },
  methods: {
    additionalRecording(row,type) { // 补录
      this.initDetailsTable();
      if(type === 'relayPump') {
        if(row.applyDets.length) {
          this.relayPumpVisible = true;
          this.relayPumpConfig = row;
        } else {
          this.$message.warning("该条记录下没有接力泵")
        }
      }else {
        this.operationVisible = true;
        this.operationConfig = row;
      }
    },
    handleClick (index) {
      this.tableParam.pumpingStatus = index;
      this.currenindex = index;
      this.gettableData();
    },
    showDispath () {
      if (!this.multipleSelection.length) {
        this.$message.warning('请选择要分派的数据')
        return
      }
      const newArry = [...new Set(this.multipleSelection.map(item => item.stationId))];
      if (newArry.length !== 1) {
        this.$message.warning('分派数据的站点不相同,请重新选择站点相同的数据')
        return
      }
      if (!this.multipleSelection.every(item => item.pumpingStatus===1)) {
        this.$message.warning('只有待分派的数据才能进行批量分派')
        return
      }
      this.dispatchVisile = true;
      this.dataType = this.multipleSelection[0].dataType; //1内部，2外部
      if (this.dataType == 1) {
        this.assigncat_listFun(this.multipleSelection[0])
        this.table2 = [
          {
            label: "车牌/编号",
            width: "120",
            prop: "plateNumber",
            status: true,
          },
          {
            label: "泵类型",
            width: "",
            prop: "pumpTypeName",
            status: true,
          },
          {
            label: "东风车",
            width: "",
            prop: "",
            status: true,
          },
          {
            label: "驾驶员",
            width: "",
            prop: "",
            status: true,
          },
          {
            label: "泵到场时间",
            width: "",
            prop: "pumpArrivalTime",
            status: true,
          },
          {
            label: "泵工",
            width: "250",
            prop: "pumpManId",
            status: true,
          },
          {
            label: "到场时间",
            width: "",
            prop: "arrivalTime",
            status: true,
          },
          {
            label: "状态",
            width: "",
            prop: "pump",
            status: true,
          },
          {
            label: "确认时间",
            width: "",
            prop: "sureTime",
            status: true,
          },
          {
            label: "操作",
            width: "180",
            prop: "",
            status: true,
          },
        ];
      } else if (this.dataType == 2) {
        this.table2 = [
          {
            label: "泵送自编号",
            width: "120",
            prop: "pumpNo",
            status: true,
          },
          {
            label: "车牌/编号",
            width: "120",
            prop: "plateNumber",
            status: true,
          },
          {
            label: "泵类型",
            width: "",
            prop: "pumpTypeName",
            status: true,
          },
          {
            label: "操作",
            width: "180",
            prop: "",
            status: true,
          },
        ];
      }
      assignpump_list({ dataType: this.dataType }).then((res) => {
        if (res.code === 1001) {
          this.pumpTypeIdList = res.data;
        }
      });
      this.toViewList2 = [{
        type: "1",
        pumpTypeId: "", //泵类型id
        pumpNo: "", //泵送自编号!
        pumpTypeName: "", //泵类型名称！
        carId: "", //东风车
        plateNumber: "", //车牌号！
        carTypeName: "", //车类型！
        carTypeId: "", //车类型id！
        driverId: "", //驾驶员
        driverName: "", //驾驶员名称！
        pumpArrivalTime: '',
        pumpMans: [{
          planAssignId: '',
          pump: 0,
          arrivalTime: '',
          operationStatus: 2,
          pumpManId: '',
          pumpManName: '',
        }],
      }]
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    savePumpingDifficultyRecordFun() {
      savePumpingDifficultyRecord(this.look3Form).then((res) => {
        if (res.code == 1001) {
          this.look3Type = false
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }
      })
    },
    calculatePumpingDifficultyRecordFun() {
      calculatePumpingDifficultyRecord(this.look3Form).then((res) => {
        this.look3Form = { ...this.look3Form, ...res.data }
      })
    },
    look3Fun(row) {
      this.look3Type = true
      queryPumpingDifficultyRecord({ planId: row.planId, companyId: row.companyId }).then((res) => {
        console.log(res);
        this.look3Form = res.data
        this.look3Form.companyId = row.companyId
        this.look3Form.planId = row.planId
        this.look3Form.lable = row.strengthGradeId
        this.look3Form.lable0 = row.strengthGrade
      })
    },
    handleDetails (data) {
      this.planId = data.planId;
      this.visible = true;
      this.initDetailsTable();
    },
    initDetailsTable () {
      const params = {
        page: this.page,
        pageSize: 10,
        planId: this.planId,
      }
      queryPageDetails(params).then(res => {
        if (res.code === 1001) {
          this.dataSource = res.data.data;
          this.total = res.data.totalRow;
        }
      })
      
    },
    assigncat_listFun(e) {
      assigncat_list({ carTypeId: "0c51dc71d20b4a1cb35645156d6a820d", stationId: e.stationId }).then(
        (res) => {//车辆类型-东风车
          this.plateNumberList = res.data;
        }
      );
    },
    /*表单*/
    addItem() {
      let data = {
        type: "1",
        pumpTypeId: "", //泵类型id
        pumpNo: "", //泵送自编号!
        pumpTypeName: "", //泵类型名称！
        carId: "", //东风车
        plateNumber: "", //车牌号！
        carTypeName: "", //车类型！
        carTypeId: "", //车类型id！
        driverId: "", //驾驶员
        driverName: "", //驾驶员名称！
        pumpArrivalTime: '',
        pumpMans: [{
          planAssignId: '',
          pump: 0,
          arrivalTime: '',
          operationStatus: 2,
          pumpManId: '',
          pumpManName: '',
        }],
      };
      this.toViewList.push(data);
    },
    addItem2() {
      let data = {
        type: "1",
        pumpTypeId: "", //泵类型id
        pumpNo: "", //泵送自编号!
        pumpTypeName: "", //泵类型名称！
        carId: "", //东风车
        plateNumber: "", //车牌号！
        carTypeName: "", //车类型！
        carTypeId: "", //车类型id！
        driverId: "", //驾驶员
        driverName: "", //驾驶员名称！
        pumpArrivalTime: '',
        pumpMans: [{
          planAssignId: '',
          pump: 0,
          arrivalTime: '',
          operationStatus: 2,
          pumpManId: '',
          pumpManName: '',
        }],
      };
      this.toViewList2.push(data);
    },
    deleteItem(data,index) {
      if (data.id) {
        this.deleteList1.push(data)
      }
      this.toViewList.splice(index, 1);
    },
    deleteItem2(data,index) {
      this.toViewList2.splice(index, 1);
    },
    addPumpPerson (id, index) {
      const copyData = JSON.parse(JSON.stringify(this.toViewList));
      const params = {
        planAssignId: id,
        pump: 0,
        arrivalTime: '',
        operationStatus: 2,
        pumpManId: '',
        pumpManName: '',
      }
      for (let i = 0; i < copyData.length; i+=1) {
        if (i === index) {
          copyData[i].pumpMans.push(params)
        }
      }
      this.toViewList = copyData;
    },
    addPumpPerson2 (id, index) {
      const copyData = JSON.parse(JSON.stringify(this.toViewList2));
      const params = {
        planAssignId: id,
        pump: 0,
        arrivalTime: '',
        operationStatus: 2,
        pumpManId: '',
        pumpManName: '',
      }
      for (let i = 0; i < copyData.length; i+=1) {
        if (i === index) {
          copyData[i].pumpMans.push(params)
        }
      }
      this.toViewList2 = copyData;
    },
    showMap (data) {
      this.mapVisible = true;
      this.mapCenter = [data.longitude, data.latitude]
    },
    deletePumpPerson (data, index1, index2) {
      if (data.id) {
        const copyData = JSON.parse(JSON.stringify(this.toViewList));
        copyData[index2].pumpMans[index1].operationStatus = 1;
        this.toViewList = copyData;
        this.$forceUpdate();
        return
      }
      for (let i = 0; i < this.toViewList.length; i+=1) {
        if (i === index2) {
          this.toViewList[i].pumpMans.splice(index1, 1);
        }
      }
    },
    deletePumpPerson2 (data, index1, index2) {
      for (let i = 0; i < this.toViewList2.length; i+=1) {
        if (i === index2) {
          this.toViewList2[i].pumpMans.splice(index1, 1);
        }
      }
    },
    //泵自编号选择后赋值
    changeItemPumpNo(e) {
      let item = this.pumpTypeIdList.find(
        (res) => res.plateNumber == e.plateNumber
      );
      e.pumpTypeId = item.pumpTypeId;
      e.pumpNo = item.pumpNo;
      e.pumpTypeName = item.pumpTypeName;
    },
    //东风车选择后赋值
    changeItemPlateNumber(e) {
      let item = this.plateNumberList.find((res) => res.carId == e.carId);
      e.plateNumber = item.plateNumber;
      e.carTypeName = item.carTypeName;
      e.carTypeId = item.carTypeId;
    },
    //驾驶员选择后赋值
    changeItemDriverId(e) {
      let item = this.driverIdList.find((res) => res.userId == e.driverId);
      e.driverName = item.userName;
    },
    //泵工选择后赋值
    changeItemPumpManId(e) {
      let item = this.pumpManIdList.find((res) => res.userId == e.pumpManId);
      e.pumpManName = item.userName;
    },
    ToViewFun(e) {
      this.ToViewType = true;
      this.deleteList1 = [];
      this.planId = e.planId;
      this.dataType = e.dataType; //1内部，2外部
      if (this.dataType == 1) {
        this.assigncat_listFun(e)
        this.table2 = [
          {
            label: "车牌/编号",
            width: "120",
            prop: "plateNumber",
            status: true,
          },
          {
            label: "泵类型",
            width: "",
            prop: "pumpTypeName",
            status: true,
          },
          {
            label: "东风车",
            width: "",
            prop: "",
            status: true,
          },
          {
            label: "驾驶员",
            width: "",
            prop: "",
            status: true,
          },
          {
            label: "泵到场时间",
            width: "",
            prop: "pumpArrivalTime",
            status: true,
          },
          {
            label: "泵工",
            width: "250",
            prop: "pumpManId",
            status: true,
          },
          {
            label: "到场时间",
            width: "",
            prop: "arrivalTime",
            status: true,
          },
          {
            label: "状态",
            width: "",
            prop: "pump",
            status: true,
          },
          {
            label: "确认时间",
            width: "",
            prop: "sureTime",
            status: true,
          },
          {
            label: "确认地理位置",
            width: "",
            prop: "222",
            status: true,
          },
          {
            label: "操作",
            width: "180",
            prop: "",
            status: true,
          },
        ];
      } else if (this.dataType == 2) {
        this.table2 = [
          {
            label: "泵送自编号",
            width: "120",
            prop: "pumpNo",
            status: true,
          },
          {
            label: "车牌/编号",
            width: "120",
            prop: "plateNumber",
            status: true,
          },
          {
            label: "泵类型",
            width: "",
            prop: "pumpTypeName",
            status: true,
          },
          {
            label: "操作",
            width: "180",
            prop: "",
            status: true,
          },
        ];
      }
      assignpump_list({ dataType: this.dataType }).then((res) => {
        if (res.code === 1001) {
          this.pumpTypeIdList = res.data;
        }
      });
      assign_list({ planId: this.planId }).then((res) => {
        if (res.code === 1001) {
          if (res.data) {
            this.toViewList = this.copy(res.data);
            this.toViewListCopy = this.copy(res.data);
            return
          }
          this.toViewList = [];
          this.toViewListCopy = [];
        }
      });
    },
    init() {
      /*重置数据*/
      this.tableParam.name = "";
      this.tableParam.linkman = "";
      this.gettableData();
    },
    submit() {
      // for (let i = 0; i < this.toViewList.length; i+=1) {
      //   const list = this.toViewList[i];
      //   if (!list.plateNumber || !list.driverId || !list.pumpArrivalTime) {
      //     this.$message.warning('不能存在空数据！！！')
      //     return
      //   }
      //   for (let j = 0; j < list.pumpMans.length; j+=1) {
      //     const list2 = list.pumpMans[j];
      //     list.pumpMans[j].pumpManType = j === 0 ? 0 : 1;
      //     if (!list2.pumpManId || !list2.arrivalTime) {
      //       this.$message.warning('不能存在空数据！！！')
      //       return
      //     }
      //   }
      // }
      if ([...new Set(this.toViewList.map((item) => item.plateNumber))].length < this.toViewList.length) {
        this.$message.warning('车牌号不能相同');
        return;
      }
      let list = [...this.toViewList, ...this.deleteList1.map(item => ({...item, status: 0}))];
      let obj = {
        assignList: list,
        planId: this.planId,
        operation: this.operation
      };
      batchDispatch([obj]).then((res) => {
        if (res.code == 1001) {
          this.ToViewType = false
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.gettableData();
        }
      });
    },
    submit2 () {
      for (let i = 0; i < this.toViewList2.length; i+=1) {
        const list = this.toViewList2[i];
        if (!list.plateNumber || !list.driverId || !list.pumpArrivalTime) {
          this.$message.warning('不能存在空数据！！！')
          return
        }
        for (let j = 0; j < list.pumpMans.length; j+=1) {
          const list2 = list.pumpMans[j];
          list.pumpMans[j].pumpManType = j === 0 ? 0 : 1;
          if (!list2.pumpManId || !list2.arrivalTime) {
            this.$message.warning('不能存在空数据！！！')
            return
          }
        }
      }
      if ([...new Set(this.toViewList2.map((item) => item.plateNumber))].length < this.toViewList2.length) {
        this.$message.warning('车牌号不能相同');
        return;
      }
      const params = this.multipleSelection.map(item =>  {
        return {
          planId: item.planId,
          operation: 1,
          assignList: this.toViewList2
        }
      })
      batchDispatch(params).then(res => {
        if (res.code === 1001) {
          this.dispatchVisile = false;
          this.$message.success('分派成功');
          this.gettableData();
        }
      })
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
  filters: {
    pouringMethodFilter(e) {
      if (e) {
        e = JSON.parse(e)
        let table = e.map((res) => res.name)
        let text = table.join('、')
        return text
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.table_top {
  color: #008000;
}
.table_top:hover {
  color: #008000 !important;
  opacity: 0.8;
}
.el-input,
.el-select {
  width: 320px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}
.table_link:hover {
  opacity: 0.8;
}
.FZYbox {
  > div {
    margin-bottom: 10px;
    > div {
      margin-bottom: 5px;
      .red {
        color: red;
      }
    }
  }
}
.handleColor {
  cursor: pointer;
  color: #008000;
  opacity: 0.8;
}
</style>